<template>
    <div>
        <n-row>
            <n-card class="card item1" :style="{backgroundColor: useHexToRgba(themeColor, 0.3)}">
                <div class="item1-main">
                    <div class="item1-main-content">
                        <n-avatar round :size="105" :src="logo"/>
                        <div style="margin-left: 20px">
                            <h1 style="font-weight: 400; margin: 5px 0">EasyAI 释放您的创作潜能</h1>
                          <n-blockquote v-if="versionInfo">
                            当前版本 : <n-tag size="small" type="primary">{{versionInfo.localVersion}}</n-tag>
                            最新版本 :
                            <n-popover width="300px;">
                              <template #trigger>
                                <n-tag type="error" size="small">{{versionInfo.version}} </n-tag>
                              </template>
                              <n-p class="text-container">
                                {{versionInfo.changeLog}}
                              </n-p>
                          </n-popover>
                            <n-button v-if="versionInfo?.needUpdate === '1' " style="margin-left: 5px;" size="small" type="error" secondary @click="updateJar">在线更新</n-button>
                          </n-blockquote>
                          <n-blockquote>
                            如需要技术支持，请尽快联系QQ: 373156680
                          </n-blockquote>
                          <n-blockquote>
                            软件更新周期为2年，后面更新不收费。
                          </n-blockquote>
                        </div>
                    </div>
                    <div class="item1-main-bg">
                    </div>
                </div>
            </n-card>
        </n-row>

        <n-row style="margin-top: 5px;">
            <n-col span="16" style="padding-right: 5px;">
                <MdPreview editorId="preview-only"  :model-value="notice" :style="{ height: clientHeight - (layoutHeaderHeight  + tabsHeight + 198) + 'px'}"  :theme="darkTheme?'dark':'light'"/>
            </n-col>
            <n-col span="8">
              <MdPreview editorId="preview-only"  :model-value="history" :style="{ height: clientHeight - (layoutHeaderHeight  + tabsHeight + 198) + 'px'}"  :theme="darkTheme?'dark':'light'"/>
            </n-col>
        </n-row>


      <n-modal  v-model:show="syncModalShow" @after-leave="getUpdateConfig" >
        <n-card
            style="width: 600px"
            title="升级进度"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
        >
          <UpdateSchdule></UpdateSchdule>
        </n-card>
      </n-modal>
    </div>



</template>

<script lang="ts" setup>
import {useSystemStore} from "@/store/modules/useSystemStore";
import {storeToRefs} from "pinia";
import {useHexToRgba} from "@/hooks/useColor";
import {setting} from "@/config/setting";
import {civitaiController} from '@/api/controller/civitai/civitaiController'
import {onMounted, ref} from "vue";
import {MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import {darkTheme} from "naive-ui";
import {sysParamController} from "@/api/controller/sysParamController";
import {sysUpdateController} from "@/api/controller/sysUpdateController";
import SyncDataSchdule from "@/components/syncData/syncDataSchdule.vue";
import UpdateSchdule from "@/components/updateJar/updateSchdule.vue";


const {clientHeight ,layoutHeaderHeight , tabsHeight,themeColor} = storeToRefs(useSystemStore())
const {logo} = setting
const notice = ref('')
const history = ref('')
const versionInfo = ref(null)
onMounted(()=>{
  getNoticeAndHistory()
  getUpdateConfig()
})
const syncModalShow = ref(false)
const getNoticeAndHistory = async ()=>{
  sysParamController.getNoticeAndHistory().then(res=>{
    if (res.code == 200) {
      notice.value = res.data.notice
      history.value = res.data.history
    }
  })
}


const getUpdateConfig = () =>{
  sysUpdateController.getUpdateConfig().then(res =>{
    if (res.code == 200) {
      versionInfo.value = res.data
      console.log(versionInfo.value)
    }
  })
}

const updateJar = () =>{
  syncModalShow.value = true
  sysUpdateController.updateJar().then(res =>{
  })
}




</script>

<style lang="less">

.item1 {
    grid-area: aaa;
    min-height: 180px;
    padding: 0 !important;
    .n-card__content {
        padding: 0 !important;
    }

    &-main {
        display: flex;
        align-items: flex-end;
        height: 100%;

        &-content {
            width: 600px;
            height: 100%;
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &-bg {
            flex: 1;
            height: 90%;
            text-align: end;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url("../../assets/images/home-bg.svg");
        }
    }
}

.carousel-img {
    //width: 90%;
    height: 350px;
    object-fit: cover;
}

.text-container{
  white-space: pre-line;
}
</style>
